@charset "UTF-8";
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td, menu {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

ul, dl, ol {
  list-style: none;
}

img, fieldset, input[type="submit"] {
  border: 0 none;
}

em {
  font-style: normal;
}

strong {
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, input[type="button"] {
  cursor: pointer;
  border: 0 none;
}

a, button, input, img {
  -webkit-touch-callout: none;
}

img {
  /*pointer-events:none;*/
  /*禁止图片的点击事件，例如长按保存图片*/
}

input, select, textarea {
  outline: none;
}

a {
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

html, body {
  /*禁止用户选择元素*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  /*禁止元素点击出现半透明黑色背景*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
  width: 100%;
  font-family: Arial, 'Microsoft YaHei';
  outline: 0;
  -webkit-text-size-adjust: none;
}

body {
  margin: 0;
  position: relative;
}

body {
  background: seagreen;
}

.wrap {
  margin: 75px auto 0;
  width: 1000px;
}

.wrap .chart {
  width: 300px;
  height: 300px;
  font-size: 0;
  background: #fff;
  position: relative;
}

.wrap .chart .square-background {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0px 0px 8px #fff;
  transition-property: background-position;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  position: absolute;
}

.wrap .chart .square-background1 {
  background: url(../img/Jigsawpuzzle.jpg) 0 0 no-repeat;
}

.wrap .chart .square-background2 {
  background: url(../img/Jigsawpuzzle.jpg) -100px 0 no-repeat;
}

.wrap .chart .square-background3 {
  background: url(../img/Jigsawpuzzle.jpg) -200px 0 no-repeat;
}

.wrap .chart .square-background4 {
  background: url(../img/Jigsawpuzzle.jpg) 0 -100px no-repeat;
}

.wrap .chart .square-background5 {
  background: url(../img/Jigsawpuzzle.jpg) -100px -100px no-repeat;
}

.wrap .chart .square-background6 {
  background: url(../img/Jigsawpuzzle.jpg) -200px -100px no-repeat;
}

.wrap .chart .square-background7 {
  background: url(../img/Jigsawpuzzle.jpg) 0 -200px no-repeat;
}

.wrap .chart .square-background8 {
  background: url(../img/Jigsawpuzzle.jpg) -100px -200px no-repeat;
}

.wrap .chart .square-background9 {
  background: url(../img/Jigsawpuzzle.jpg) -200px -200px no-repeat;
}

.wrap .explain {
  width: 500px;
  margin-left: 75px;
}

.wrap .explain .start {
  width: 170px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #fff;
  cursor: pointer;
}

.wrap .explain .option {
  width: 170px;
  height: 30px;
  margin-top: 20px;
  text-align: center;
  line-height: 30px;
  background: #fff;
  cursor: pointer;
}

.wrap .explain .option .number {
  display: inline-block;
}

.wrap .explain .option .triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid #999;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  vertical-align: middle;
}

.wrap .explain .hidden-options {
  visibility: hidden;
  height: 30px;
  margin-top: 2px;
}

.wrap .explain .hidden-options li {
  display: inline-block;
  width: 140px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: mistyrose;
  cursor: pointer;
}

.wrap .explain .text {
  line-height: 28px;
}

.wrap .mouseOn {
  border-right: none;
  border-bottom: none;
  border-top: solid 2px #aaa;
  border-left: solid 2px #aaa;
}

.wrap .hover {
  filter: alpha(opacity=80);
  opacity: .8;
  box-shadow: 0px 0px 8px #000;
  z-index: 20;
  *border: 1px solid #09F;
}
